<template>
    <div>
        <el-main>
            <el-page-header @back="goBack">
            </el-page-header>
            <el-row :gutter="20" style="line-height:30px">
                <el-col :span="16" :offset="2">
                    <el-descriptions title="个人信息" direction="vertical" :column="4" border>
                        <el-descriptions-item label="用户名">{{formdata.name}}</el-descriptions-item>
                        <el-descriptions-item label="手机号">{{formdata.phone}}</el-descriptions-item>
                        <el-descriptions-item label="身份证号">{{formdata.idNumber}}</el-descriptions-item>
                        <el-descriptions-item label="备注">
                            <el-tag size="small">学校</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item  label="配送地址">
                            <el-descriptions  :column="1" border>
                                <el-descriptions-item v-for="(list,index) in formdata.address" :label="index+1">{{list}}</el-descriptions-item>
                                <el-descriptions-item :label="formdata.leng+1"><router-link to="/customer/person/addAddress"><el-button type="text" @click="addAddress">添加新地址</el-button></router-link></el-descriptions-item>
                            </el-descriptions>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
                <el-col :span="4" :offset="1">
                    <span style="font-weight:500">{{nowDate}}</span>
                    <br>
                    <clock :time="time"></clock>
                </el-col>
            </el-row>
        </el-main>
        <el-footer style="line-height=20">
            <el-row :gutter="20">
                <el-col :span="5" class="footfont">增值电信业务经营许可证：合字B2-XXXXXXXX</el-col>
                <el-col :span="3" :offset="1" class="footfont">京ICP备XXXXXXXX号-7</el-col>
                <el-col :span="4" :offset="1" class="footfont">京公网安备110XXXXXXXXXXXXX号</el-col>
                <el-col :span="3" :offset="1" class="footfont">隐私声明和 Cookie</el-col>
                <el-col :span="2" :offset="2" class="footfont">法律声明</el-col>
            </el-row>
        </el-footer>
        <el-dialog title="添加新地址" :visible.sync="centerDialogVisible" width="30%" center style="line-height: 20px;">
            <router-view :UserId="formdata.id" @change="getState"></router-view>
        </el-dialog>
    </div>
</template>
<script>
import Clock from 'vue-clock2';
import {getUser} from '@/utils/modules/customer.js'
export default {
    mounted() {
        this.setTime()
        this.getPersonInfo()
    },
    components: { Clock },
    data() {
        return {
            value: new Date(),
            time: '10:41',
            nowDate: '',
            formdata: {
                // name: 'kooriookami',
                // sex: '男',
                // phone: '18100000000',
                // idNumber: '411252***********70'
            },
            centerDialogVisible:false
        }
    },
    methods: {
        getState(val) {
            this.centerDialogVisible = val
            this.$router.go(0)
        },
        setTime() {
            setInterval(() => {
                let Y = new Date().getFullYear()
                let M = new Date().getMonth()
                let d = new Date().getDate()
                let h = new Date().getHours()
                let m = new Date().getMinutes()
                let s = new Date().getSeconds()
                this.time = h + ':' + m + ':' + s
                this.nowDate = '现在是:' + Y + '年 ' + M + '月' + d + '日 ' + h + '小时' + m + '分钟' + s + '分钟'
            }, 1000)
        },
        getPersonInfo(){
            getUser().then(res=>{
                console.log(res.data)
                this.formdata = res.data
                this.formdata.address = []
                let data = res.data.etc.addressBook.itemList
                for(let i = 0 ; i < data.length ; i++){
                    this.formdata.address.push(data[i].provinceName+data[i].cityName+data[i].districtName
                        +data[i].detail+data[i].label)
                }
                this.formdata.address.push('福建省厦门市集美区理工路600号东北门')
                this.formdata.leng = this.formdata.address.length
                // console.log(this.formdata.address)
            }).catch(err=>{
                this.$message({
                    type:'error',
                    message:err.message,
                    showClse:true
                })
            })
        },
        addAddress(){
            this.centerDialogVisible = true
        },
        goBack(){
            this.$router.push({
                path:'/customer'
            })
        }
    }
}
</script>
<style>
.el-calendar-table .el-calendar-table__row .el-calendar-day {
    height: 30%;
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}
.footfont{
    color: #666666;
    font-size: smaller;
    font-weight: 200;
}
</style>